    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link
        rel="stylesheet"
        href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
        crossorigin="anonymous"
        />
        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script
        src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"
        ></script>
        <script src="/22-06/echarts/echarts.js"></script>
        <script src="/jqery.js"></script>
        <script src="/22-06/echarts插件/echarts主题.js"></script>
        <script src="/22-06/06-06/China.js"></script>
        <script
        language="javascript"
        src="https://webapi.amap.com/maps?v=2.0&key=670048a1e9e5dec7c029a0f954cfe08f&plugin=AMap.Scale,AMap.ToolBar"
    ></script>
    <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
    <script
        type="text/javascript"
        src="https://a.amap.com/jsapi_demos/static/demo-center/data/china-pp.js"
    ></script>
    <style>
        *{
            margin: 0;padding: 0;
            list-style: none;
        }
        body{
            background-color: rgba(214, 209, 209, 0.6);
        }
        #user,#lingua{
            width: 500px;
            height: 350px;
            background-color: white;
            overflow: auto;
        }
        #user{
            height: 250px;
            float: left;
        }
        span{
            margin-right: 20px;
        }
        #linguaList{
            width: 500px;
            height: 200px;
        }
        #gaoDe{
            width: 600px;
            height: 300px;
            background-color: white;
            overflow: auto;
            position: fixed;
            top: 630px;
        }
        td{
            height: 30px;
            line-height: 30px;
          text-align: left;
        }
        #lingua{
            margin-top: 15px;
            position: fixed;
            top: 250px;
        }
        #user h4{
            margin-left: 200px;
            margin-top: 50px;
            
        }
        #user>p{
            margin-left: 200px;
        }
        #time{
            margin-left: 20px;
            margin-top: 50px;
            border-top: 1px solid #9999;
        }
        #usershu,#xiaoxi,#shuliang{
            width: 300px;
            height: 100px;
            background-color: white;
            margin-left: 50px;
            float: left;
        }
        #usershu img,#xiaoxi img,#shuliang img{
            float: left;
        }
        #usershu h4, #xiaoxi h4, #shuliang h4{
            margin-top: 20px;
            margin-left: 150px;
        }
        #usershu p, #xiaoxi p, #shuliang p{
            margin-left: 140px;
        }
        #work{
            width: 1000px;
            height: 450px;
            background-color: white;

            position: fixed;
            margin-left: 550px;
            margin-top: 150px;
        }
        #workList{
            width: 1000px;
            height: px;
           
        }
        #trend{
            width: 910px;
            height: 300px;
            background-color: white;
            position: fixed;
            top: 630px;
            left: 640px;
        }
        #box{
            width: 1800px;
            height: 850px;
            margin: auto;
        }
    </style>
    </head>
    <body>

        <div id="box">
            <div id="user">
                <img src="/作业/6-10考试/images/touxiang.jpg" alt="" srcset="" style="float: left;">
                <h4>admin</h4>
                <p>超级管理员</p>
            <div id="time">
                <p>上次登录时间: <span id="dqTime"></span></p>
                <p>上次登录地点: <span id="didian">郑州</span></p>  
            </div>
            </div>
            <div id="usershu">
                <img src="/作业/6-10考试/images/yonghu.jpg" alt="" srcset="">
                <h4 style="color: blue;"> 1234</h4>
                <p>用户访问量</p>
            </div>
            <div id="xiaoxi">
                <img src="/作业/6-10考试/images/xiaoxi.jpg" alt="" srcset="">
                <h4 style="color: blue;"> 321</h4>
                <p >系统消息</p>
            </div>
            <div id="shuliang">
                <img src="/作业/6-10考试/images/shuliang.jpg" alt="" srcset="">
                <h4 style="color: red;"> 500</h4>
                <p>数量</p>
            </div>
        
            <div id="work">
                <h4>代办事项</h4>
            <div id="workList">

            </div>
            
            </div>
            <div id="trend">
        
            </div>
            
        
            <div id="lingua">
                <h4>语言详情</h4>
            <div id="linguaList">
               <p>vue</p>
                <div class="progress">
                    <div class="progress-bar" id="vue" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;background-color: green; ">
                      60%
                    </div>
                  </div>
                  <p>js</p>
                  <div class="progress">
                      <div class="progress-bar" id="js" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;background-color: yellow;">
                        60%
                      </div>
                    </div>
                    <p>css</p>
                    <div class="progress">
                        <div class="progress-bar" id="css" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; background-color: blue;">
                          60%
                        </div>
                      </div>
                      <p>Html</p>
                      <div class="progress">
                          <div class="progress-bar" id="html" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%; background-color: red;">
                            60%
                          </div>
                        </div>
            </div>
            </div>
        
            <div id="gaoDe">
        
            </div>
        </div>
        
    </body>
    <script>
        //时间
        var date = new Date()
        console.log(date.getHours());//时
        console.log(date.getMinutes());//分
        console.log(date.getSeconds());//秒
        //要求封装一个函数番薯当前的时分秒 格式08:08:08
        function getime(){
            var time = new Date()
            var s = time.getHours()
            s=s<10 ?'0'+s :s
            var f = time.getMinutes()
            f=f<10 ?'0'+f :f
            var m = time.getSeconds()
            m=m<10 ?'0'+m :m
            return s +':'+f + ':' + m 
        }
    $('#dqTime').html(getime())




        //ajax调用进度条借口
        $.ajax({
            url: "http://47.94.4.201/index.php/index/admin/getNum", // 链接
            method: "GET",  //GET请求
            dataType: "json",      //不跨域
            success: function (e) {
                let vue = e.data.vuenum
                let js = e.data.jsnum
                let css = e.data.cssnum
                let html = e.data.htmlnum
                console.log(vue);
                $('#vue').html(vue + '%')
                $('#js').html(js + '%')
                $('#css').html(css + '%')
                $('#html').html(html + '%')
                $('#vue').css('width',vue + '%' )
                $('#js').css('width',js + '%' )
                $('#css').css('width',css + '%' )
                $('#html').css('width',html + '%' )

 
            } 
        })


        // 高德地图显示坐标
         //初始化地图对象，加载地图
         var map = new AMap.Map("gaoDe", {
            viewMode: '3D',
            zoom: 16,
            center: [113.429039,34.776207],
            resizeEnable: true
    });

    // 创建纯文本标记
    var text = new AMap.Text({
        text:'公司所在地',
        anchor:'center', // 设置文本标记锚点
        draggable:true,
        cursor:'pointer',
       
        style:{
            'padding': '.75rem 1.25rem',
            'margin-bottom': '1rem',
            'border-radius': '.25rem',
            'background-color': 'white',
            'width': '15rem',
            'border-width': 0,
            'box-shadow': '0 2px 6px 0 rgba(114, 124, 245, .5)',
            'text-align': 'center',
            'font-size': '20px',
            'color': 'blue'
        },
        position:  [113.429039,34.776207]
    });

    text.setMap(map);

    //获取右侧数量
    $.ajax({
            url: "http://47.94.4.201/index.php/index/admin/getNolist", // 链接
            method: "GET",  //GET请求
            dataType: "json",      //不跨域
            success: function (e) {
             
                  $('#usershu h4').html(e.data[0].num)
                  $('#xiaoxi h4').html(e.data[1].num)
                  $('#shuliang h4').html(e.data[2].num)
                  
                 
                 
              }
             
            }
        )

    //获取待办事项
    var str = ''
    $.ajax({
            url: "http://47.94.4.201/index.php/index/admin/getTolist", // 链接
            method: "GET",  //GET请求
            dataType: "json",      //不跨域
            success: function (e) {
              for (let i in e.data){
                 str +=`
                 <table class="table table-hover">
                    <tr>
                        <td class='workLists'><span><input type="checkbox" onchange='ff(${i})'></span>${e.data[i]}</td>
                        </tr>
                 </table> 
                `
            }
            $('#workList').html(str)
        }
        })
        var dd = 0
        function ff(index){
            console.log(index);
            if(dd == 0){
                 $('.workLists')[index].style = 'text-decoration:line-through'
                dd =1
            }else if(dd == 1){
                $('.workLists')[index].style = 'text-decoration:none'
                dd =0
            }
        }

        // $('#workList').click(function(){
        //     if($(event.target).attr('data-name') == 'name'){
        //         $(event.target).css({'text-decoration': 'none'})
        //         $(event.target).removeAttr("data-name")
        //         return
        //     }
        //     $(event.target).css({'text-decoration': 'line-through'})
        //     $(event.target).attr('data-name','name')
        //     console.log(456);
           
        // })
        
     // 折线图
     var myChart = echarts.init(document.getElementById('trend'));
     option = {
        title: {
    text: '近几个月各类商品销售趋势图'
  },
  legend: {},
  tooltip: {},
  dataset: {
    // 提供一份数据。
    source: [
      ['product', '家电', '百货', '商品'],
      ['6月', 234, 164, 74],
      ['7月',278, 178, 118],
      ['8月', 270, 150, 200],
      ['9月', 190, 135, 235],
      ['10月', 230, 160, 50],
    ]
  },
  // 声明一个 X 轴，类目轴（category）。默认情况下，类目轴对应到 dataset 第一列。
  xAxis: {
    type: 'category',
    boundaryGap: false,
  },
  // 声明一个 Y 轴，数值轴。
  yAxis: {},
  // 声明多个 bar 系列，默认情况下，每个系列会自动对应到 dataset 的每一列。
  series: [{ type: 'line',emphasis: {
        focus: 'series' }},
           { type: 'line',emphasis: {
        focus: 'series' }},
           { type: 'line',emphasis: {
        focus: 'series' }},
           { type: 'line',emphasis: {
        focus: 'series' }},
           { type: 'line',emphasis: {
        focus: 'series' }},
          
      ]
};
myChart.setOption(option);
    </script>
    </html>